<template>
	<view class="author-stats-container">
		<!-- 作者信息 -->
		<view class="author-section">
			<view class="author-info" @click="handleAuthorClick">
				<image class="avatar" :src="authorInfo.avatar" mode="aspectFill"></image>
				<view class="author-details">
					<text class="author-name">{{ authorInfo.nickname }}</text>
				</view>
			</view>
			<button class="follow-btn" :class="{ 'followed': isFollowed }" @click="handleFollow">
				{{ isFollowed ? '已关注' : '关注' }}
			</button>
		</view>

		<!-- 互动数据 -->
		<view class="stats-section">
			<view class="stats-item">
				<uni-icons type="heart" size="16" color="#666"></uni-icons>
				<text class="stats-text">{{ formatNumber(stats.likeCount) }} 点赞</text>
			</view>
			<view class="stats-item">
				<uni-icons type="chat" size="16" color="#666"></uni-icons>
				<text class="stats-text">{{ formatNumber(stats.commentCount) }} 评论</text>
			</view>
			<view class="stats-item">
				<uni-icons type="star" size="16" color="#666"></uni-icons>
				<text class="stats-text">{{ formatNumber(stats.favoriteCount) }} 收藏</text>
			</view>
			<!-- 只有当 showEdit 为 true 时才显示编辑按钮 -->
			<view v-if="showEdit" class="stats-item edit-item" @click="handleEdit">
				<uni-icons type="compose" size="16" color="#666"></uni-icons>
				<text class="stats-text">编辑</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { defineProps, defineEmits } from 'vue'

	// 定义接口
	interface AuthorInfo {
		id : number
		nickname : string
		avatar : string
	}

	interface Stats {
		likeCount : number
		commentCount : number
		favoriteCount : number
	}

	// 定义 props
	const props = defineProps<{
		authorInfo : AuthorInfo
		stats : Stats
		isFollowed : boolean
		showEdit? : boolean  // 新增：控制编辑按钮显示
	}>()

	// 定义 emits
	const emit = defineEmits<{
		authorClick : [authorInfo: AuthorInfo]
		follow : [isFollowed: boolean]
		edit : []
	}>()

	// 格式化数字
	const formatNumber = (num : number) : string => {
		if (num >= 10000) {
			return (num / 10000).toFixed(1) + '万'
		}
		return num.toString()
	}

	// 处理作者点击
	const handleAuthorClick = () => {
		emit('authorClick', props.authorInfo)
	}

	// 处理关注/取消关注
	const handleFollow = () => {
		emit('follow', !props.isFollowed)
	}

	// 处理编辑点击
	const handleEdit = () => {
		emit('edit')
	}
</script>

<style lang="scss" scoped>
	.author-stats-container {
		background-color: #fff;
	}

	// 作者信息
	.author-section {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 32rpx;
		border-top: 1rpx solid #f0f0f0;

		.author-info {
			display: flex;
			align-items: center;
			flex: 1;

			.avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 24rpx;
			}

			.author-details {
				flex: 1;

				.author-name {
					font-size: 28rpx;
					font-weight: 600;
					color: #333;
					display: block;
					margin-bottom: 8rpx;
				}
			}
		}

		.follow-btn {
			background-color: #ff4757;
			color: #fff;
			border: none;
			border-radius: 32rpx;
			padding: 16rpx 32rpx;
			font-size: 24rpx;

			&.followed {
				background-color: #f0f0f0;
				color: #666;
			}
		}
	}

	// 互动数据
	.stats-section {
		display: flex;
		padding: 32rpx;
		border-top: 1rpx solid #f0f0f0;

		.stats-item {
			display: flex;
			align-items: center;
			margin-right: 48rpx;

			.stats-text {
				font-size: 24rpx;
				color: #666;
				margin-left: 8rpx;
			}

			&.edit-item {
				margin-left: auto;
				margin-right: 0;
				cursor: pointer;
				transition: all 0.3s ease;

				&:hover {
					opacity: 0.7;
				}

				&:active {
					transform: scale(0.95);
				}
			}
		}
	}
</style>